// 处理顶部的js效果
// 去掉最后一个li中a的右边框
var topTag = $('.top-wrap');

// find()  找到的是所有匹配的子元素
// children() 找到所有匹配的直系子元素
// each()   遍历获取单个的标签
topTag.find('.left').each(function() {
	//去除li最后一个右边框线
	$(this).children().last().children().css('border', 'none');
	$(this).children().hover(function() {
		//  console.log(this)   // 调用事件的标签对象本身
		$(this).addClass('active');
	}, function() {
		$(this).removeClass('active');
	})
})
topTag.find('.right > div').hover(function() {
	$(this).addClass('active');
	$(this).find('.shopMenu').stop(true).slideDown();
}, function() {

	$(this).find('.shopMenu').stop(true, true).slideUp(500, function() {
		// this 指向的是  .shopmenu
		$(this).parent().removeClass('active');
	});
})

// 第二部分 -- 主导航效果
var navwrap = $('.nav-wrap');
navwrap.find('.left').children().hover(function() {
	$(this).addClass('active');
}, function() {
	$(this).removeClass('active');
})

// 当鼠标滑过前7个li标签时, 显示下拉菜单
var uls = $('.dropMenu').find('ul');
navwrap.find('.left').children().hover(function() {
	// 获取当前标签的索引值
	var ins = $(this).index();
	if(ins < 7) {
		uls.eq(ins).addClass('active').siblings().removeClass('active');
		$('.dropMenu').stop(true).slideDown(500);
	} else {
		$('.dropMenu').stop(true).slideUp(500);
	}
})
navwrap.find('.left').mouseleave(function() {
	$('.dropMenu').stop(true).slideUp(500);
})
$('.dropMenu').find('.left').mouseleave(function() {
	$('.dropMenu').stop(true).slideUp(500);
})
$('.dropMenu').mouseover(function() {
	$('.dropMenu').stop(true).slideDown(500);
}).mouseleave(function() {
	$('.dropMenu').stop(true).slideUp(500);
})

//搜索框效果
navwrap.find('.right').hover(function() {
	$(this).addClass('colors');
}, function() {
	$(this).removeClass('colors')
});
navwrap.find('.right input').focus(function() {
	//			console.log('聚焦了');
	navwrap.find('.right').addClass('active');
	//fadeOut()淡入淡出
	navwrap.find('.right .schShow').fadeOut();
	//show();显示隐藏的内容
	navwrap.find('.right .schList').show();
}).blur(function() {
	navwrap.find('.right').removeClass('active');
	//fadeOut()淡入淡出
	navwrap.find('.right .schShow').fadeIn();
	//hide();隐藏显示的内容
	navwrap.find('.right .schList').hide();
})
navwrap.find('.right .schList').children().hover(function() {
	$(this).addClass('active')
}, function() {
	$(this).removeClass('active')
})
navwrap.find('.right .schShow').children().hover(function() {
	$(this).addClass('active')
}, function() {
	$(this).removeClass('active')
})
navwrap.find('.right > a').hover(function() {
	$(this).addClass('active')
}, function() {
	$(this).removeClass('active')
})
//第三部分 第一块
//轮播图部分
var timer;
var num = 0;
var imgLen = $('.imgList').children().length;

function show(ins) {
	// $('.imgList').children().eq(ins).css('display', 'block').siblings().css('display', 'none');
	$('.imgList').children().eq(ins).fadeIn().siblings().fadeOut();
	$('.iconList').children().eq(ins).addClass('active').siblings().removeClass('active');
}
show(num);
// 下一张
var banner = $('.banner');
banner.find('i.fa').hover(function() {
	$(this).addClass('active');
}, function() {
	$(this).removeClass('active');
})
banner.find('.next').click(function() {
	autoPlay();
})
banner.find('.prev').click(function() {
	num--;
	if(num < 0) {
		num = imgLen - 1;
	}
	show(num);
})

$('.iconList').children().click(function() {
	var ins = $(this).index();
	show(ins);
	num = ins;
})

function autoPlay() {
	num++;
	if(num >= imgLen) {
		num = 0;
	}
	show(num);
}
timer = setInterval(autoPlay, 2000);
banner.hover(function() {
	clearInterval(timer);
}, function() {
	timer = setInterval(autoPlay, 2000);
})




//li的长度
var m = $('.iconList li').length
//console.log(m);
$('.iconList li').hover(function() {
	var n = $(this).index();
	//li的索引值
//	console.log(n)
	$(this).addClass('active')
}, function() {
	$(this).removeClass('active')
})

//侧边栏选项卡效果
$('.sideList').children().each(function(ins) {
	$(this).hover(function() {
		$(this).addClass('active')
		$('.rightList').children().eq(ins).show();
	}, function() {
		$(this).removeClass('active')
		$('.rightList').children().eq(ins).hide();
	})
})
//页面刷新时  设置section的宽度  遍历section标签 获取ul的长度 个数
$('.rightList').children().each(function() {
	var len = $(this).find('ul').length;
	var ul_width = $(this).find('ul').width();
	$(this).css('width', len * ul_width);
	$(this).hover(function() {
		$(this).show();
	}, function() {
		$(this).hide();
	})

	$(this).find('ul').children().children().hover(function() {
		$(this).parent().addClass('active')
	}, function() {
		$(this).parent().removeClass('active')
	});

	$(this).find('a.xuan').hover(function() {
		$(this).addClass('active').parent().removeClass('active')
	}, function() {
		$(this).removeClass('active')
	})
})

//第三部分  第三块   明星单品  自动轮播图
var stars = $('.slide-third').find('.stars');
//console.log(stars)
var ul_width = stars.find('ul').width();
//console.log(ul_width)
var ullen = stars.find('ul').length;
//console.log(ullen)

stars.find('section').css('width', ullen * ul_width)
//手动轮播
//var next = stars.find('.next')
stars.find('.next').click(function() {
	nextStar()
//	next.hasClass('action') ? next.addClass('active') : next.removeClass('active');
//
////	next.hasClass('action') ? next.addClass('active') : next.removeClass('active')
//	next.removeClass('action').siblings().addClass('action');
//	stars.find('section').stop().animate({
//		left: -ul_width
//	}, 500)
})
//var prev = stars.find('.prev');
stars.find('.prev').click(function() {
	prevStar()
//	prev.hasClass('action') ? prev.addClass('active') : prev.removeClass('active');
//	prev.removeClass('action').siblings().addClass('action');
//	stars.find('section').stop().animate({
//		left: 0
//	}, 500);
});
stars.find('p').children().hover(function(){
	if( $(this).hasClass('action') ){
		$(this).addClass('active')
	}
})
function nextStar() {
	var next = stars.find('.next')
	next.removeClass('action').siblings().addClass('action');
	
	next.hasClass('action') ? next.addClass('active') : next.removeClass('active');
	
	stars.find('section').stop().animate({
		left: -ul_width
	}, 500)
}

function prevStar() {
	var prev = stars.find('.prev');
	prev.removeClass('action').siblings().addClass('action');
	
	prev.hasClass('action') ? prev.addClass('active') : prev.removeClass('active');
	
	stars.find('section').stop().animate({
		left: 0
	}, 500)
}
var startime;
startime = setInterval(function() {
	var starLeft = stars.find('section').position().left;
	(starLeft < 0) ? prevStar(): nextStar();
}, 6000);
stars.find('p').hover(function() {
	clearInterval(startime);
}, function() {
	startime = setInterval(function() {
		var starLeft = stars.find('section').position().left;
		(starLeft < 0) ? prevStar(): nextStar();
	}, 6000);
});


//第四部分
var mainwrap = $('.main-wrap');
//console.log(mainwrap)
var hdlist = $('.hometv').find('.hd-list').find('li');
var mnlist = $('.box-right').find('ul');
var h;
//鼠标滑过上边导航下边图片会发生相对应的变化
hdlist.mouseover(function() {
	h = $(this).index();
	$(this).addClass('active')
		.siblings().removeClass('active');

	mnlist.eq(h).addClass('active')
		.siblings().removeClass('active');

});
$('.mnList li').hover(function() {
	$(this).addClass('active')
	$(this).find('.review-wrap').addClass('active')
	//	$(this).find('.review-wrap').stop(true,true).slideDown(1000);
}, function() {
	$(this).removeClass('active')
	//	$(this).find('.review-wrap').stop(true,true).slideUp(1000);
	$(this).find('.review-wrap').removeClass('active')
})
//最后一个 li 的样式
$('.mnList .spec').children().hover(function() {
	$(this).addClass('active')
	//	.siblings().removeClass('active');
}, function() {
	$(this).removeClass('active')
})

//第四部分   第二块
var hdlist = $('.smart').find('.hd-list').find('li');
var twolist = $('.smart-right').find('.mnList');
var e;
hdlist.mouseover(function() {
	e = $(this).index();
	$(this).addClass('active')
		.siblings().removeClass('active');

	twolist.eq(e).addClass('active')
		.siblings().removeClass('active');

});
//第四部分  第三块 搭配
var hdlist = $('.match').find('.hd-list').find('li');
var thirlist = $('.match-right').find('.mnList');
var s;
hdlist.mouseover(function() {
	s = $(this).index();
	$(this).addClass('active')
		.siblings().removeClass('active');

	thirlist.eq(s).addClass('active')
		.siblings().removeClass('active');

});
//第四部分  第四块 配件
var hdlist = $('.acce').find('.hd-list').find('li');
var fourlist = $('.acce-right').find('.mnList');
var w;
hdlist.mouseover(function() {
	w = $(this).index();
	$(this).addClass('active')
		.siblings().removeClass('active');

	fourlist.eq(w).addClass('active')
		.siblings().removeClass('active');

});
//第四部分 第五块 周边
var hdlist = $('.rim').find('.hd-list').find('li');
var fivelist = $('.rim-right').find('.mnList');
var x;
hdlist.mouseover(function() {
	x = $(this).index();
	$(this).addClass('active')
		.siblings().removeClass('active');

	fivelist.eq(x).addClass('active')
		.siblings().removeClass('active');

});


//第五部分  为你推荐
var ullen = $('.ul-wrap').children().length;
//ul的索引值
var ulins = $('.ul-wrap ul').index()
var ulwidth = $('.ul-wrap').children().width()
$('.ul-wrap').css('width', ullen * ulwidth);
var divul = $('.ul-wrap').children();
var prev = $('.recom-top').find('section').children().children('.prev')
var next = $('.recom-top').find('section').children().children('.next')
var p = $('.recom-top').find('section').children();
function animateShow(){
	divul.animate({
		left:-ulwidth * ulins
	},1000)
}
p.children().hover(function(){
	$(this).addClass('action').siblings().removeClass('action')
	$(this).hasClass('active') ? $(this).addClass('action') : $(this).removeClass('action')
},function(){
	$(this).removeClass('action')
})
next.click(function(){
	ulins++
	if(　ulins > 3　){
		ulins = 3
		prev.addClass('active').siblings().removeClass('active')
	}else{
	next.hasClass('active') ? next.addClass('action') : next.removeClass('action')
	next.addClass('active').siblings().addClass('active')
	animateShow()
	}
})
prev.click(function(){
	ulins--
	if(　ulins < 0　){
		ulins = 0
		next.addClass('active').siblings().removeClass('active')
	}else{
	prev.hasClass('active') ? prev.addClass('action') : prev.removeClass('action')
	prev.addClass('active').siblings().addClass('active')
	animateShow()
	}
})
//小轮播图部分
// $('.big-wrap > li')eq(0).each(function(ins){
//	$(this).find('.iconlist').children().click(function(){
//		$(this).addClass('active').siblings().removeClass('active')
//		$('.big-wrap .imglist').eq(ins).animate({
//			left:-260
//		},1000)
//	})
//})
var bidul = $('.big-wrap > li');
var icons = $('.big-wrap > li').find('.iconlist').children()
icons.click(function(){
	
})
